<script setup>
import { ref, getCurrentInstance, toRaw } from "vue";
import { useMessage } from "naive-ui";
import { PersonOutline, KeyOutline } from "@vicons/ionicons5";
import { useRouter } from "vue-router";

const router = useRouter()

// console.log(router)

const message = useMessage();
const { proxy } = getCurrentInstance();

const formValue = ref({
  username: "admin",
  password: "admin",
});

const rules = {
  username: {
    required: true,
    message: "请输入账号",
    trigger: "blur",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
};

const formRef = ref();

function handleValidateClick(e) {
  formRef.value.validate((errors) => {
    if (!errors) {
      // message.success('Valid')
      // console.log('success')
      // message.loading('正在登录，请稍后')

      message["loading"]("正在登录，请稍后", {
        duration: 20000,
      });

      // console.log(JSON.stringify(toRaw(formValue)._rawValue))

      proxy.$http
        .post("login", toRaw(formValue)._rawValue)
        .then(function (response) {
          message.destroyAll();
          console.log(response);
          if (response.status !== 200) {
            message.error(response.data.msg, { duration: 2000 });
            return;
          }
          message.success(response.data.msg, { duration: 2000 });
          window.sessionStorage.setItem("Authorization", response.data.Authorization);

          router.push("/home");
        })
        .catch(function (error) {
          console.error(error);
          message.destroyAll();
          message.error("登录失败，请查看网络是否连接", { duration: 2000 });
        });
    } else {
      console.log(errors);
      // message.error('Invalid')
      console.log("error");
      message.error("信息未填写");
    }
  });
}
</script>

<style scoped>
.lgoin-container {
  height: 350px;
  width: 380px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);

  /* background-color: blanchedalmond; */
}

#loginBg {
  background-image: url("../../assets/lgon_bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}
</style>
<template >
  <div id="loginBg">
    <div class="lgoin-container">
      <h1 style="text-align: center; margin-bottom: 80px">某君的小呆毛</h1>

      <n-form
        :label-width="80"
        :model="formValue"
        :rules="rules"
        ref="formRef"
        label-placement="left"
      >
        <n-form-item path="username">
          <n-input
            v-model:value="formValue.username"
            placeholder="请输入账号"
            @keyup.enter="handleValidateClick"
          >
            <template #prefix>
              <n-icon size="18" color="#000">
                <PersonOutline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item path="password">
          <n-input
            type="password"
            placeholder="请输入密码"
            v-model:value="formValue.password"
            @keyup.enter="handleValidateClick"
          >
            <template #prefix>
              <n-icon size="18" color="#000">
                <KeyOutline />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item>
          <n-button block @click="handleValidateClick" type="info">登录</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>